<template>
  <div class="forget_bac">
    <div class="progress">
      <el-steps
        :active="1"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step title="登录账户输入" />
        <el-step title="重置密码" />
        <el-step title="重置完毕" />
      </el-steps>
    </div>
    <div class="forget_input_form">
      <el-form class="login-form" label-position="left">
        <el-form-item label="密码：" label-width="100px">
          <el-input v-model="password" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="重置密码：" label-width="100px">
          <el-input v-model="password2" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-button
          type="primary"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="reset"
        >保存</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { passwordReset } from '@/api/user';
import md5 from 'js-md5';

export default {
  components: {},
  data() {
    return {
      password: '',
      password2: '',
      phone: '',
      passwordResetTempToken: ''
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    reset() {
      this.phone = this.$route.query.phone;
      this.passwordResetTempToken = this.$route.query.passwordResetTempToken;

      if (!this.password || !this.password2) {
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
        return;
      } else if (this.password !== this.password2) {
        this.$message({
          message: '两次密码输入不一致，请重新输入',
          type: 'warning'
        });
        return;
      }

      passwordReset({
        phone: this.phone,
        password: md5(this.password),
        passwordResetTempToken: this.passwordResetTempToken
      }).then((res) => {
        this.$message({
          message: '修改成功，请重新登录',
          type: 'success'
        });
        this.$store.dispatch('user/logout');

        setTimeout(() => {
          this.$router.push({
            path: '/login'
          });
        }, 800);
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.forget_input_form {
  width: 450px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
}

.code_img {
  width: 100px;
  height: 40px;
}

.code_img_input {
  width: 240px;
}
</style>
